<template>
	<div>
			<!--顶部样式-->
		<div class="head-bg">
			<div class="head-black">
				<a href="#/shiming01">
				<div class="left-arrow">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
				</div>
				</a>
				<div class="head-center">
					<p>身份实名认证</p>
				</div>
				<div class="baocun">
					<p>添加</p>
				</div>
			</div>
		</div>
		<!--input框-->
		<div class="shenxi">
		<span class="sfxx">身份信息</span>
		<span class="shenhe">请确保身份证信息真实有效，否则无法通过审核</span>
		</div>
		<input type="text" name="name" id="name" placeholder="您的姓名(填写身份证上的真实姓名)" />
		<br />
		<input type="text" name="hao" id="hao" placeholder="您的身份证号(将加密处理)" />
		<!--身份证照片-->
		<div class="photo">
			<span class="zp">身份证照片</span>
			<span class="sczhao">上传身份证正反面照片让通关更便捷</span>
		</div>
		<!--上传-->
		<div class="id">
			<div class="please">
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/shangc.png"/>
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/chuan.png"/>
			</div>
			<div class="zheng-id">
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/zhengmian.png"/>
				<img src="../../assets/img/gerenzhongxin/gongzhonghao/fanmian.png"/>
			</div>
		</div>
		<div class="why">
			<p>为什么需要实名认证?</p>
		</div>
		<div class="btm">
			<p>·根据海关规定，购买跨境商品需要办理清关手续，需要您上传身份证信息用于商品入境申报真实的姓名和身份信息才能确保您的包裹顺利通过海关检查</p>
<p>·声明：阿拉灯负责提交信息，并对您的身份信息保密，绝不传播或用于其他地方</p>
		</div>
		<div class="submit">
			<a href="#/shiming03">
			<button id="sbt">提交</button>
			</a>
		</div>
	</div>
</template>

<script>
</script>

<style>
		html {
		background: #f2f2f2;
	}
	
	#app {
		overflow: hidden;
	}
	
	.head-bg {
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
	}
	
	.shezhi-content {
		border: 0.1rem solid darkgray;
	}
	
	.head-black {
		margin: 0 auto;
		padding-top: 3.1rem;
		display: flex;
		justify-content: space-between;
		width: 95%;
	}
	
	.left-arrow img {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.head-center {
		font-size: 3.6rem;
		font-weight: 600;
		color: white;
	}
	.baocun{
		opacity: 0;
		color: white;
		font-size: 3rem;
	}
	.shenxi,.photo{
		width: 100%;
		height: 6rem;
		line-height: 6rem;
	}
	.sfxx,.zp{
		font-size: 2.4rem;
		float: left;
		margin-left: 2rem;
	}
	.shenhe,.sczhao{
		float: left;
		margin-left:2rem;
		color: red;
		font-size: 1.8rem;
	}
	#name,#hao{
		width: 100%;
		height: 8rem;
		font-size: 2.8rem;
		border-bottom: 0.1rem solid gainsboro;
		color: #cccccc;
	}
	.id{
		background: white;
		width: 72rem;
		height: 62rem;
		
	}
	.please{
		display: flex;
		justify-content: space-around;
		padding: 4rem;
	}
	.please img{
		width: 28rem;
		height: 20rem;
	}
	.zheng-id{
		display: flex;
		justify-content: space-around;
	}
	.zheng-id img{
		width: 22rem;
		height: 33rem;
	}
	.why{
		width: 100%;height: 4rem;
		background: pink;
		margin-top: 2rem;
	}
	.why p{
		color: red;
		font-size: 2.4rem;
		line-height: 4rem;
	}
	.btm{
		width: 100%;
		height: 16rem;
		background: white;
	}
	.btm p{
		text-align: left;
		margin-left: 2rem;
		font-size: 1.8rem;
		padding: 2rem;
	}
	.submit{
		width: 100%;
		height: 9rem;
		background: white;
		border: 0.1rem solid gray;
	}
	#sbt{
		font-size: 2rem;
		background: #E53E42;
		color: white;
		padding: 0.5rem 8rem;
		margin-top:3rem ;
		border-radius: 3rem;
	}
</style>